/* #region hex */
.box {
  width: 100px;
  height: 100px;
}
.bg-hex {
  background-color: #ff0000;
}
/* #endregion hex */

/* #region backgroundImage */
.box1 {
  width: 800px;
  height: 400px;
  border: 1px solid #000;
}
.bg-image {
  background-image: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png);
}
/* #endregion backgroundImage */

/* #region backgroundRepeat */
.box2 {
  width: 800px;
  height: 400px;
  border: 1px solid #000;
  background-image: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png);
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
/* #endregion backgroundRepeat */

/* #region backgroundSize */
.box3 {
  width: 800px;
  height: 200px;
  border: 1px solid #000;
  background-image: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png);
  background-repeat: no-repeat;
}
.bg-size {
  background-size: 100px;
}
/* #endregion backgroundSize */

/* #region backgroundPosition */
.box4 {
  width: 800px;
  height: 200px;
  border: 1px solid #000;
  background-image: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png);
  background-repeat: no-repeat;
  background-size: 100px;
}
.bg-position {
  background-position: center;
}
/* #endregion backgroundPosition */
